<template>
  <view class="weather-container">
    <view class="weather-info" v-if="tomorrowWeather">
      <text class="info-item">日期：{{ tomorrowWeather.date }}</text>
      <text class="info-item">星期：{{ tomorrowWeather.week }}</text>
      <text class="info-item">最高温：{{ tomorrowWeather.high }}°C</text>
      <text class="info-item">最低温：{{ tomorrowWeather.low }}°C</text>
      <text class="info-item">天气：{{ tomorrowWeather.type }}</text>
    </view>
    <view class="loading" v-else>加载天气中...</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tomorrowWeather: null
    };
  },
  onLoad() {
    this.getWeatherInfo();
  },
  methods: {
    getWeatherInfo() {
      uni.request({
        url: 'http://localhost:3000/api/weather',
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200 && res.data.status === 200) {
            const tomorrow = res.data.data.forecast[1];
            this.tomorrowWeather = {
              date: tomorrow.date,
              week: tomorrow.week,
              high: tomorrow.high.replace('高温', '').replace('°C', ''),
              low: tomorrow.low.replace('低温', '').replace('°C', ''),
              type: tomorrow.type
            };
          }
        }
      });
    }
  }
};
</script>

<style scoped>
.weather-container {
  padding: 20rpx 24rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}
.weather-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx 30rpx;
  align-items: center;
}
.info-item {
  font-size: 28rpx;
  color: #333;
  line-height: 40rpx;
}
.loading {
  text-align: center;
  padding: 20rpx;
  color: #999;
  font-size: 28rpx;
}
</style>